<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>站点-首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon">
  <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/res/layui/css/layui-theme-dark.css}">
  <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
  <style>
    /* 自定义头部样式 */
    .header {
      height: 60px;
      background-color: #2c2c2c;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .header-title {
      font-size: 20px;
      color: white;
    }

    .header-select {
      width: auto; /* 自适应宽度 */
      max-width: 200px; /* 限制下拉框的最大宽度 */
    }

    /* 使大容器居中放置并添加外边距 */
    .center-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px;
      padding: 20px;
      background-color: rgba(255, 255, 255, .12);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      flex-wrap: wrap;
    }

    /* 小div的样式 */
    .item-box {
      display: flex;
      align-items: center;
      width: 300px; /* 固定宽度 */
      height: 100px; /* 固定高度 */
      margin: 10px;
      padding: 10px;
      background-color: rgba(255, 255, 255, .16);
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .item-box img {
      width: 80px; /* 图片的固定宽度 */
      height: 80px; /* 图片的固定高度 */
      margin-right: 15px;
      border-radius: 4px;
    }

    .item-box .item-text {
      flex-grow: 1;
      font-size: 16px;
      color: #FFFFFF;
    }

    /* 自定义样式 */
    .custom-select {
      width: 180px;
      margin: 20px;
    }

    .layui-input-block {
      margin-left: 0
    }
  </style>
</head>
<body>
<!-- 头部部分 -->
<div class="header">
  <div class="header-title">shadow</div>
  <div class="header-select">
    <!-- 下拉框 -->
    <div class="custom-select">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-input-block">
            <label for="dynamicDropdown"></label>
            <select id="dynamicDropdown" lay-filter="dynamicDropdown">
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="center-container" id="main-container"></div>

<script type="text/template" id="item-box-template">
  <div class="item-box">
    <img src="{{icon}}" alt="{{title}}" class="layui-nav-img">
    <a href="{{url}}" target="_blank">
      <span class="item-text">{{title}}</span>
    </a>
  </div>
</script>
<script type="text/template" id="nav-item-template">
  <div class="layui-col-md4">
    <div class="layui-card-body layui-card-item">
      <img src="{{icon}}" alt="{{title}}" class="layui-nav-img">
      <a href="{{url}}" target="_blank" class="layui-card">
        <span class="layui-nav-title">{{title}}</span>
      </a>
    </div>
  </div>
</script>
<script type="text/javascript" th:inline="javascript">
  const basePath = [[${#httpServletRequest.getContextPath()}]] + "/site"
  let types = []
  let currentData = []
</script>
<script type="text/javascript">
  layui.use(['jquery', 'flow', 'form'], async function () {
    let $ = layui.jquery
    let flow = layui.flow
    let form = layui.form

    // 监听下拉框选择事件
    form.on('select(dynamicDropdown)', async function (data) {
      console.log('选择了：' + data.value);
      await getList(data.value)
      renderingList()
    });

    // 渲染列表
    function renderingList() {
      flow.load({
        //流加载容器
        elem: '#main-container',
        //执行下一页的回调
        done: function (page, next) {
          setTimeout(function () {
            // 执行下一页渲染
            // 第二参数为：满足“加载更多”的条件，即后面仍有分页
            // pages为Ajax返回的总页数
            // 只有当前页小于总页数的情况下，才会继续出现加载更多
            next(currentData.join(''), false)
          }, 300);
        }
      });
    }

    // 获取类型
    async function getType() {
      await $.ajax({
        url: basePath + "/public/type",
        dataType: 'json',
        type: 'get',
        success: function (res) {
          if (!res || res.code !== 1) {
            return
          }
          console.log('success type')
          const dropdown = $('#dynamicDropdown')
          $.each(res.data, function (index, item) {
            const option = $('<option></option>').val(item).text(item)
            dropdown.append(option)
            types.push(item)
          });
          // 动态更新下拉框
          form.render('select');
          console.log("types", types)
        },
        error: function (r) {
          console.log('error', r)
        }
      })
    }

    // 获取数据
    async function getList(type) {
      currentData = []
      await $.ajax({
        url: basePath + '/public/list?type=' + encodeURI(type),
        dataType: 'json',
        type: 'get',
        success: function (r) {
          console.log('success list', r)
          if (!r || r.code !== 1) {
            return
          }
          $.each(r.data, async function (index, item) {
            const template = $('#item-box-template').html()
              .replace(/{{url}}/g, item.url)
              .replace(/{{title}}/g, item.title)
              .replace(/{{icon}}/g, item.icon)
            currentData.push(template)
          });
        },
        error: function (r) {
          console.log('error', r)
        }
      })
    }

    getType().then(async res => {
      if (types.length > 0) {
        await getList(types[0])
        renderingList()
      }
    })

  })
</script>
</body>
</html>
